<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Small Force Directed Graph</h1>

    <div id="container"></div>

    <script src="../engine/dist/ElGrapho.js"></script>
    <script>

let model = {
  nodes: [
    {group: 0},
    {group: 1},
    {group: 1},
    {group: 2},
    {group: 2},
    {group: 3}
  ],
  edges: [
    {from: 0, to: 1},
    {from: 0, to: 2},
    {from: 1, to: 3},
    {from: 1, to: 4},
    {from: 2, to: 5},
  ]
};

graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.ForceDirected(model),
  width: 500,
  height: 500,
  debug: true
});

    </script>
  </body>
</html>